<template>
    <view class="invoice-item">
        <view class="u-flex u-col-center u-row-between">
            <view class="u-rela" :style="{ 'font-size': fontSize + 'rpx' }">
                <u-checkbox v-model="order.check" v-if="isCheck" :key="`${uniid}`"> </u-checkbox>
                <text>{{ name }}：</text>
                <text>{{ order.id }}</text>
                <u-image v-if="order.orderType == 1" src="@/static/icon/10028.png" width="48" height="48" class="sample"></u-image>
            </view>
            <view class="invoice-item-time" v-if="showTime">{{ order.addTime }}</view>
            <slot name="status" class="status"></slot>
        </view>
        <view>
            <view v-for="item in order.skus" :key="item.uuid">
                <view class="collapse" @click="showGoodsDtl(item)">
                    <img-cache :src="`${global.productImageUrl}${item.picId}/1`" width="160" height="160" borderRadius="10" />
                    <view class="collapse-title">
                        <text class="u-line-3">{{ item.name }}</text>
                        <text class="collapse-title-count" v-if="order.skus.length > 1">共{{ item.num }}件</text>
                    </view>
                    <view class="arrow" :style="item.open ? 'transform: rotate(180deg)' : ''" @click.stop="throggle(item)">
                        <u-icon name="arrow-down"></u-icon>
                    </view>
                </view>
                <view v-show="item.open" class="collapse-body-wrapper">
                    <view v-for="sku in item.detail" :key="sku.uuid" class="skus-items">
                        <view class="u-flex u-row-between u-m-r-20">
                            <view class="u-flex-1 u-flex">
                                <text class="skus-items-color">{{ sku.collarName == '无领' ? '' : sku.collarName }} {{ sku.colorName }}</text>
                                <text class="skus-items-size">{{ sku.sizeName }}</text>
                            </view>
                            <view class="sku-num">x{{ sku.num }}</view>
                        </view>
                        <view class="u-flex u-row-between u-m-r-20">
                            <view class="skus-items-price">￥{{ Number(sku.price).toFixed(2) }}</view>
                            <view class="sub-text"> </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="u-flex u-col-center u-row-between footer-text">
            <text class="u-tips-color left-text">共 {{ order.totalNum }} 件</text>
            <view v-if="order.amountPrice" class="amount">
                <text>已优惠</text>
                <text>￥{{ Number(order.amountPrice).toFixed(2) }}</text>
            </view>
            <view>
                <text>{{ text }}：</text>
                <text class="o-font-color-error">￥{{ Number(order.payPrice).toFixed(2) }}</text>
            </view>
            <text v-if="order.refundPrice" class="u-tips-color">退款金额：￥{{ order.refundPrice }}</text>
        </view>
        <slot name="bottom"></slot>
    </view>
</template>

<script lang="ts" setup>
import global from '@/config'
interface props {
    order?: any
    showTime?: boolean
    name?: string
    isCheck?: boolean
    fontSize?: number
    uniid?: number | string
    text?: string
    canNav?: boolean
}
const Props = withDefaults(defineProps<props>(), {
    order: () => ({}),
    isCheck: false,
    showTime: false,
    name: '订单号',
    orderType: 0,
    fontSize: 28,
    uniid: 0,
    text: '实付',
    canNav: false
})

function throggle(item: any) {
    item.open = !item.open
}

function showGoodsDtl({ releaseId }: { releaseId: string }) {
    if (Props.canNav) {
        uni.$u.$MRouter.details.to({ id: releaseId })
    }
}
</script>

<style lang="scss" scoped>
.invoice-item {
        background-color: $uni-bg-color;
        padding: 20rpx;
        margin-top: 20rpx;

        &-time {
            font-size: 24rpx;
        }

        .sku {
            line-height: 50rpx;

            &-image {
                margin-left: 20rpx;
                flex-shrink: 0;
            }

            &-name {
                min-height: 100rpx;
                font-weight: bold;
            }

            &-info {
                font-size: 26rpx;
                color: #8C8C8C;
            }
        }
    }

    .footer-text {
        line-height: 60rpx;
        .amount{
            width: 260rpx;
            height: 40rpx;
            background-image: url(@/static/icon/10011.png);
            background-size: 260rpx 40rpx;
            background-repeat: no-repeat;
            line-height: 40rpx;
            font-size: 24rpx;
            color: #ce7f63;
            display: flex;
            justify-content: space-around;
        }
    }

    .sample {
        position: absolute;
        top: -20rpx;
        left: -20rpx;
        z-index: 1;
    }

    .cf-primary {
        color: $cf-primary;
    }
    .collapse{
        padding: 20rpx;
        padding-right: 0;
        display: flex;
        .collapse-title{
            margin-left: 20rpx;
            flex: 1;
            padding: 10rpx 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .collapse-title-count{
                font-size: 24rpx;
                color: #999;
            }
        }
        .arrow{
            align-self: center;
            transition: all .3s;
            width: 80rpx;
            text-align: center;
        }
    }
    .collapse-body-wrapper{
        padding: 0 20rpx;
        .skus-items {
            border-bottom: 1rpx solid #e6e6e6;
            line-height: 50rpx;
            padding: 10rpx 0;
            width: 100%;
            &:last-child{
                border:none;
            }
            .skus-items-color {
                font-weight: bold;
                flex: 2;
            }

            .skus-items-size {
                color: #8c8c8c;
                flex: 1;
                font-size: 24rpx;
            }

            .skus-items-price {
                font-size: 24rpx;
                color: #fc4f75;
            }
            .sku-num{
                min-width: 80rpx;
                text-align: right;
            }
        }
    }
    .left-text{
        min-width: 180rpx;
        text-align: center;
    }
</style>
